<template>
  <div>
    <el-table
      size="mini"
      header-cell-class-name="table-header-gray"
      ref="tableImpl"
      :data="list"
    >
      <el-table-column
        label="序号"
        header-align="center"
        align="center"
        type="index"
        width="55px"
        :index="getTableIndex"
      />
      <el-table-column label="申请人" prop="submitPeople">
        <template slot-scope="{row}">
          {{row.masterData && row.masterData.submitPeople}}
        </template>
      </el-table-column>
      <el-table-column label="报销部门" prop="department">
        <template slot-scope="{row}">
          {{row.masterData && row.masterData.department}}
        </template>
      </el-table-column>
      <el-table-column label="报销金额（元）">
        <template slot-scope="{row}">
          {{row.masterData && row.masterData.totalAmount}}
        </template>
      </el-table-column>
      <el-table-column label="预支费用（元）">
        <template slot-scope="{row}">
          {{row.masterData && row.masterData.prepaid}}
        </template>
      </el-table-column>
      <el-table-column label="退回金额（元）">
        <template slot-scope="{row}">
          {{row.masterData && row.masterData.refund}}
        </template>
      </el-table-column>
      <el-table-column label="补领金额（元）">
        <template slot-scope="{row}">
          {{row.masterData && row.masterData.compensate}}
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="{row}">
          {{row.masterData && row.masterData.memo}}
        </template>
      </el-table-column>
      <el-table-column label="流程创建时间" width="180px" prop="createTime" />
      <el-table-column label="流程状态" width="100px" prop="flowStatusName" />
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click.stop="handleClickDetail(scope.row)">
            详情
          </el-button>
          <el-button type="text" size="mini" class="table-btn error" @click.stop="handleClickCancle(scope.row)">
            撤销
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { FlowOperationController } from '@/api/flowController.js'
import { Reimbursement } from '@/api/approve.js';
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    queryParams: {
      default: () => {
        return {}
      }
    }
  },
  methods: {
    // 页面序号
    getTableIndex (index) {
      return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
    },
    handleClickDetail (row) {
      this.$router.push({
        path: '/Reimbursement/Detail',
        query: {
          id: row.processInstanceId,
          processDefinitionId: row.processDefinitionId
        }
      })
    },
    handleClickCancle (row) {
      console.log('撤销', row)
      this.$confirm('是否撤销此工单？')
        .then((res) => {
          let params = {
            workOrderId: row.workOrderId,
            cancelReason: '主动撤销'
          }
          FlowOperationController.cancelWorkOrder(this, params)
            .then((res) => {
              this.$message.success('撤销成功！')
              this.getList()
            })
            .catch((e) => {})
        })
        .catch((e) => {})
    },
    // 列表
    getList () {
      Reimbursement.list(this, {
        pageParam: {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize
        },
        flowWorkOrderDtoFilter: {
          flowStatus: this.queryParams.flowStatus,
          createTimeStart: this.queryParams.time && this.queryParams.time[0],
          createTimeEnd: this.queryParams.time && this.queryParams.time[1]
        },
        orderParam: [
          {
            fieldName: 'createTime',
            asc: false
          }
        ]
      }).then(res => {
        this.list = res.data.dataList
        this.total = res.data.totalCount
        this.list.forEach((item) => {
          this.$set(item, 'flowStatusName', this.flowStatusList[item.flowStatus].name)
        })
      })
    }
  },
  watch: {
    $route () {
      this.getList()
    }
  }
};
</script>
